<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>flex-wrap</title>
</head>
<style>
.flex-container {
    width: 800px;
    height: 200px;
    background-color: #87CEEB;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
.item1 {
    width: 500px;
    height: 100px;
    background-color: #FFFF00;
}
.item2 {
    width: 300px;
    height: 100px;
    background-color: #D8BFD8;
}
.item3 {
    width: 200px;
    height: 100px;
    background-color: #FF6347;
}
</style>
<body>
    <h1>flex-wrap: wrap</h1>
    <div class="flex-container">
        <div class="item1"></div>
        <div class="item2"></div>
        <div class="item3"></div>
    </div>
</body>
</html>